<%@ page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8" %>
<%@ page import="com.google.appengine.api.users.User" %>
<%@ page import="com.google.appengine.api.users.UserService" %>
<%@ page import="com.google.appengine.api.users.UserServiceFactory" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="model.Collecte" %>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Clean-Nantes - infos sur la collecte des déchets de Nantes</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1">
<link rel="stylesheet" type="text/css" href="css/default.css" media="all">
<link rel="stylesheet" type="text/css" href="css/flexslider.css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=PT+Sans">
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script src="js/default.js"></script>
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="pagewidth">
    <a href="/clean_nantes"><img style="float:left;" src="img/nantes.png" alt="" width="200px"/><img src="img/accueil.png" title="Accueil" width="32" style="float:left;margin-top:52px;"/></a>
    <%
    UserService userService = UserServiceFactory.getUserService();
    User user = userService.getCurrentUser();
    if (user != null) {
	%>
	<a href='<%= userService.createLogoutURL(request.getRequestURI()) %>'><img style="float:right;margin:10px 10px 0px 0px;" onMouseOver="this.src='img/google_deco_hover.png'" onMouseOut="this.src='img/google_deco.png'" src="img/google_deco.png" alt=""/></a>
	<span style="color:white;float:right;margin:18px -190px 0px 0px;">Déconnexion</span>
    <p style="float:right;color:white;margin:47px -190px 0px 0px;">Bienvenue, <%= user.getNickname() %> !</p>
  	<%
    } else {
	%>
	 <a href='<%= userService.createLoginURL("/clean_nantes") %>'><img style="float:right;margin:10px 10px 0px 0px;" onMouseOver="this.src='img/google_hover.png'" onMouseOut="this.src='img/google.png'" src="img/google.png" alt=""/></a>
	<%
    }
	%>
  <div id="content">
    <section id="contactUs" class="row grey">
      <div class="center">
        <strong class="subHeading">Documentation utilisateur</strong>
        <div class="columns">
        	<h2>Comment utiliser l'application...</h2>
        	<h3>1°/ Connexion à l'application</h3>
        	<p>En cliquant sur le bouton &nbsp;<img style="margin-top:-8px;" onMouseOver="this.src='img/google_hover.png'" onMouseOut="this.src='img/google.png'" src="img/google.png" alt=""/> l'utilisateur est redirigé vers la page d'authentification Google+.<br />Cette page vous permet de vous identifier via votre compte Google. Notre application récupère uniquement vore nom d'utilisateur ainsi que votre adresse e-mail liés à votre compte Google.<br />Une fois identifié, vous êtes redirigé vers notre page d'accueil en mode connecté.</p>
        	<p>Si vous arrivé sur le site en étant déjà identifié par l'intermédiaire d'un comtpe Google, la connexion se fait de façon automatique.</p>
	    	<br />
	    	<h3>2°/ Recherche de votre adresse</h3>
        	<p>Un formulaire vous permet d'effectuer une recherche directement au sein des données d'Open-Data Nantes.</p>
        	<div class="textField" style="width:200px;">
                    <input type="text" name="recherche">
            </div>
        	<p>Par conséquent les données sont actualisées en permanence. Un tableau récapitualif des réponses est affiché et présente les jours de collecte ainsi que les informations relatives aux adresses correspondantes à votre recherche. Les recherches peuvent être effectuées sur l'adresse complète ou incomplète ; par exemple : la recherche "dalby" ou "Boulevard Ernest Dalby" vous retourna des réponses similaires. Le système ne tient pas compte de la casse.</p>
        	<br />
        	<h3>3°/ Abonnement au mail d'alerte</h3>
        	<p>Une fois votre adresse trouvée, vous avez la possibilité de vous abonner à un mail d'alerte <img src="img/mail.png"/> qui vous informera la veille du passage des éboueurs à 20h00 par l'intermédiaire d'un mail envoyé à votre adresse de connexion (mail Google). Ce mail vous indiquera le type de poubelles à sortir le lendemain (bleues, jaunes, ou tri'sac).</p>
	    </div>
      </div>
    </section>
  </div>
  <footer id="footer">
    <div class="center">Elfarouk BOUSSKOUR - Xavier GOUGAT - Emaleu KAMGA - Kirollos ZAKY <span class="copy"><a href="user_documentation.jsp">Comment utiliser l'application ?</a></span></div>
  </footer>
</div>
</body>
</html>
